CSS 网格对齐

阐述

在 CSS 网格布局中，我们可以使用四种不同的属性对齐：

• justify-content: 网格的列结构如何对齐
• align-content: 网格的行结构如何对齐
• justify-items: 内容在网格中如何横向对齐
  • 子元素的 justify-self 可以覆盖
• align-items: 内容在网格中如何纵向对齐
  • 子元素的 align-self 可以覆盖

其中前两个都可以取 start, end, center, space-around, space-between, space-evenly，而后两个没有 space- 相关属性。

实例

性质

相关内容

相比于 CSS 弹性盒布局来说，我们多了 justify-items 这个选项（以及相应的 justify-self），这本质上是因为网格布局是二维的。

参考文献